<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>剪切板</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="./libs/bootstrap/bootstrap-5.2.0.css" rel="stylesheet">
    <script src="./libs/bootstrap/bootstrap-5.2.0.js"></script>
    <script src="./libs/vue/vue3.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #dddddd;
        }


        /*清空列表的按钮*/
        .clearHistory {
            z-index: 1000;
            position: fixed;
            bottom: 40px;
            right: 20px;
        }

        /*每一行没有选中的样式*/
        .item-row {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            border-radius: 4px;
            background-color: #eee;
            margin: 10px;
            box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
            max-height: 300px;
        }

        /*悬浮样式*/
        .item-row:hover {
            background-color: #ffffff;
            box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175);
        }


        .item {
            max-height: 300px;
            padding: 10px;
            margin: 10px auto;
            overflow: hidden;
        }

    </style>
</head>
<body>

<div id="app">
    <button class="btn btn-outline-danger clearHistory" @click="clearHistory">清空历史</button>

    <!--没数据时显示的提示信息-->
    <div v-if="cpData.arr.length === 0">
        <div style="margin-top: 100px;width: 100%;text-align: center">
            暂无内容,复制内容以在此显示 <br>
            点击想要复制的条目窗口将自动隐藏并复制内容到剪切板
        </div>
    </div>

    <!--有数据的时候显示-->
    <div v-else>
        <div class="item-row" v-for="(item,index) in cpData.arr" :key="item" @click="copyOne(index)">
            <pre class="item">{{ item }}</pre>
        </div>
    </div>

</div>

<div id="show"></div>
<script src="main.js"></script>

</body>

</html>